<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新的DOM快速查找节点</title>
</head>
<body>
    <div>
        <p id="p1">段落1</p>
        <p class="c1">段落2</p>
        <p class="c1">段落3</p>
        <p>段落4</p>
        <p>段落5</p>
    </div>
    <form action="#">
        <input type="text" name="username">
        <select name="city" id="">
            <option value="">成都</option>
            <option value="">绵阳</option>
            <option value="">德阳</option>
        </select>
        <textarea name="info" id="" cols="30" rows="10"></textarea>
    </form>
    <script>
        // getElementById：根据id获取节点，一次只能获取一个节点
        let p1 = document.getElementById("p1"); // 常用
        // getElementsByTagName：根据标签名获取节点
        let ps = document.getElementsByTagName("p");
        console.log(ps);
        // getElementsByClassName：根据class获取节点
        let cs = document.getElementsByClassName("c1");
        console.log(cs);
        // getElementsByName：根据name属性获取节点
        let username = document.getElementsByName("username");
        console.log(username);
        // querySelector：根据css选择器获取一个元素节点，如果有多个则获取匹配的第一个
        // querySelectorAll：和querySelector类似，但它可以获取多个元素节点
        console.log(document.querySelector("#p1"));
        console.log(document.querySelector(".c1"));
        console.log(document.querySelectorAll(".c1")); // 常用
        console.log(document.querySelector("div>p:nth-child(4)"));

    </script>
</body>
</html>